<script setup>
import {ref} from "vue";
import request from "./utils/request.js";
import api from './api/rfid.js'
// import mq from './api/mqttconnect.js'

// 是否连接的标志
const connectReadyFlag = ref(false);

const selectedPort = ref()
const selectedBaudRate = ref(115200);
const portList = ref([])
const baudRateList = ref([1200, 2400, 4800, 9600,14400,19200, 38400, 57600, 76800, 115200, 128000, 230400, 256000, 460800])

const readContent = ref();
const tagShow = ref('');


// 创建WebSocket服务器并监听指定端口
const socket = new WebSocket('ws://localhost:8266/rfid');

// 监听连接建立事件
socket.addEventListener('open', (event) => {
  console.log('WebSocket连接已建立');
});

// 监听消息接收事件
socket.addEventListener('message', (event) => {
  let tag = event.data;
  if (tag) {
    tagShow.value = tag
    console.log('收到标签：', tag);
  }

});

// 监听连接关闭事件
socket.addEventListener('close', (event) => {
  console.log('WebSocket连接已关闭');
});

api.getCurrentSerialPort().then(res=> {

  selectedPort.value = res.data.data;
});

api.getSerialPorts().then(({data}) => {
  portList.value = data;
});

// mq.connectMQTT();
// mq.subscribeTopic("rfid-connect-ready", function(payload) {
//   connectReadyFlag.value = true;
// })
// mq.subscribeTopic("read-tag", function(payload) {
//   if (payload.length <= 2) {
//     const num = parseInt(payload);
//     switch (num) {
//       case 0x10:
//         tagShow.value = "操作成功";
//         break;
//       case 0x11:
//         tagShow.value = "操作失败";
//         break;
//       case 0x32:
//         tagShow.value = "读标签错误";
//         break;
//       case 0x36:
//         tagShow.value = "无可操作标签";
//         break;
//       case 0x37:
//         tagShow.value = "成功盘存但访问失败";
//         break;
//       case 0x40:
//         tagShow.value = "访问标签错误或密码错误";
//         break;
//       case 0x41:
//         tagShow.value = "无效的参数";
//         break;
//       case 0x43:
//         tagShow.value = "操作长度越界";
//         break;
//       default:
//         tagShow.value = "其他";
//     }
//     return;
//   }
//
//   tagShow.value = payload;
// })

function openSerial() {
  request({
    url: '/rfid/openPort',
    method: 'post',
    data: {
      index: selectedPort.value,
      baudRate: selectedBaudRate.value
    }
  }).then(({data}) => {
    console.log(data);
  })
}

function read() {

  socket.send('read-tag')

  // request({
  //   url: '/rfid/read',
  //   method: 'post'
  // }).then(({data}) => {
  //   console.log(data);
  // })
}

function getReadContent() {
  request({
    url: '/rfid/getReadContent',
    method: 'get'
  }).then(({data}) => {
    readContent.value = data.data;
  })
}


</script>

<template>
  <div>
    <div v-if="!selectedPort">
      <div>
        串口选择：
        <select v-model="selectedPort">
          <option v-for="(p, index) in portList" :value="index">{{ p.friendlyName }}</option>
        </select>
      </div>
      <div>
        波特率：
        <select v-model="selectedBaudRate">
          <option v-for="b in baudRateList" :value="b">{{ b }}</option>
        </select>
      </div>
      <div>
        <button @click="openSerial">打开串口</button>
      </div>
    </div>

    <div v-if="selectedPort">



      <table>
        <tr>
          <td><button @click="read">读标签</button></td>
          <td>
            <div>{{tagShow}}</div>
          </td>
        </tr>

      </table>

    </div>

  </div>



</template>

<style scoped>

</style>
